<template>
  <div class="container">
    <el-card class="box-card" style="background-color: #fff">
      <!-- 头部模块 -->
      <div class="top">
        <div class="box-card-left">
          <b style="color: #606266">学科名称 &nbsp;</b>
          <!-- placeholder="请输入学科"
            style="width: 250px"
            class="margin"
            v-model="placeholder" -->
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width: 250px"
          ></el-input>
          <el-button class="margin" @click="clearable">清除</el-button>
          <el-button type="primary" class="margin" @click="search"
            >搜索</el-button
          >
        </div>
        <div class="box-card-right">
          <!-- @click="addrow(obj.counts + 1)" -->
          <el-button type="success" @click="dialogVisible = true">
            <i class="el-icon-edit"></i>
            新增学科
          </el-button>
        </div>
      </div>
      <!-- 显示总数居 -->
      <div class="data">
        <i class="el-icon-view"></i>
        <span>数据一共20</span>
      </div>
      <!-- 数据展示模块 -->
      <div class="main">
        <div class="main-nav">
          <el-row>
            <el-col :span="1">
              <div class="grid-content bg-purple">序号</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-light">学科名称</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple">创建者</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">创建日期</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple">前台是否显示</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">二级目录</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">标签</div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">题目数量</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">操作</div>
            </el-col>
          </el-row>
        </div>
        <div class="main-body">
          <el-row class="row" v-for="obj in this.obj" :key="obj.id">
            <el-col :span="1">
              <div class="grid-content bg-purple">{{ obj.id }}</div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-light">
                {{ obj.subjectName }}
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple">{{ obj.username }}</div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                {{ obj.addDate }}
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple">
                {{ obj.isFrontDisplay }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">
                {{ obj.twoLevelDirectory }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">
                {{ obj.tags }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-light">
                {{ obj.totals }}
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                <a href="javascript:;">学科分类 </a>
                <a href="javascript:;">学科标签 </a>
                <a href="javascript:;">修改 </a>
                <el-button type="text" @click="open(obj.id)">删除</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 分页模块 -->
      <div class="foot">
        <div class="block">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 100]"
            :page-size="data.pagesize"
            layout=" total,sizes, prev, pager, next, jumper"
            :total="data.counts"
          >
          </el-pagination>
        </div>
        <!-- </div> -->
      </div>
      <el-dialog title="新增学科" :visible.sync="dialogVisible" width="30%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="学科名称" prop="subject">
            <el-input
              v-model="ruleForm.subject"
              placeholder="请输入学科名称"
              style="width: 70%"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFn">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, add } from "@/api/hmmm/subjects";

// import axios from "axios";
export default {
  data() {
    return {
      ruleForm: {
        subject: "",
      },
      rules: {
        subject: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      num: "",
      data: "",
      obj: "",
      input: "",
      currentPage4: 1,
      index: "",
      text: "",
      dialogVisible: false,
      value: "true",
      isFrontDisplay: "",
      arr: [],
    };
  },
  methods: {
    async handleSizeChange(val) {
      this.obj = null;
      console.log(`每页 ${val} 条`);
      this.data.pagesize = val;
      const { data } = await list({ pagesize: this.data.pagesize });
      this.obj = data.items;
      console.log(data);
      this.search();
    },
    async handleCurrentChange(val) {
      this.data.page = val;
      const { data } = await list({ page: this.data.page });
      // console.log(this.data.page);
      // console.log(data);
      this.obj = data.items;
      // console.log(1);
    },
    // 清除输入框
    clearable() {
      this.input = "";
      // console.log(list);
    },
    open(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.removerow(id);
          // this.obj = data.items;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      console.log(id);
    },
    // 搜索
    async search() {
      this.obj = null;
      const { data } = await list(this.input);
      this.data = data;
      this.obj = data.items;

      // console.log(this.data);
      // console.log(this.obj);
      // console.log(this.obj.id);
      // this.obj.forEach((element) => {});
      //

      // for (let i = 0; i <= this.obj.length; i++) {
      //   for (let k = 0; k <= this.obj.length - 1; k++) {
      //     if (this.obj[k].id > this.obj[k + 1].id) {
      //       this.obj[i].id = this.obj[k].id + this.obj[k+1].id
      //       // this.arr = this.obj[k];
      //       // this.obj[k] = this.obj[k + 1];
      //       // this.obj[k + 1] = this.arr;
      //     }
      //   }
      // }
      // console.log(this.obj)
      // for (var i = 0; i < this.obj.length; i++) {
      //   for (var j = 1; j < this.obj.length; j++) {
      //     if(this.obj[i].id > this.obj[j].id) {
      //       var temp;
      //       temp = this.obj[i].id
      //       this.obj[i].id = this.obj[j].id
      //       this.obj[j].id = temp
      //       console.log(this.obj[i].id);
      //     }
      //   }
      // }
      // console.log(this.obj)
      // this.obj = data.items.reverse();
      for (var i = 0; i < this.obj.length - 1; i++) {
        // 确定轮数
        for (var j = 0; j < this.obj.length - i - 1; j++) {
          // 确定每次比较的次数
          if (this.obj[j].id > this.obj[j + 1].id) {
            var tem;
            tem = this.obj[j];
            this.obj[j] = this.obj[j + 1];
            this.obj[j + 1] = tem;
          }
        }
      }

      // function compare(prop) {
      //   return function (a, b) {
      //     let val1 = a[prop];
      //     let val2 = b[prop];
      //     return val1 - val2;
      //   };
      // }
      // this.obj.sort(compare(this.obj.id)());
      // console.log(this.obj.reverse());
    },
    // 删除
    async removerow(id) {
      const { data } = await remove({ id: id });
      // console.log(id);
      // console.log(data);
      this.obj = data.items;
      this.search();
    },
    // 新增
    // @click="dialogVisible = false
    async addFn() {
      console.log(11);
      if (this.value === false) {
        this.isFrontDisplay = 0;
      } else {
        this.isFrontDisplay = 1;
      }
      const { data } = await add({
        subjectName: this.ruleForm.subject,
        isFrontDisplay: this.isFrontDisplay,
      });
      console.log(data);
      // this.obj.push(data);
      this.obj = data.items;
      this.search();
    },
    async sort() {
      for (let i = 0; i <= this.obj.length; i++) {
        for (let k = 0; k <= this.obj.length - 1; k++) {
          if (this.obj[k].id > this.obj[k + 1]) {
            this.arr = this.obj[k];
            this.obj[k] = this.obj[k + 1];
            this.obj[k + 1] = this.arr;
          }
        }
      }
      console.log(this.obj);
    },
  },
  created() {
    this.search();
  },
};
</script>

<style scoped>
.margin {
  margin-left: 10px;
}
.box-card {
  overflow: hidden;
}
.box-card-left {
  float: left;
}
.box-card-right {
  float: right;
}
.top {
  height: 40px;
}
.data {
  background-color: #f4f4f5;
  height: 40px;
  line-height: 40px;
  color: #909399;
  padding-left: 20px;
  margin-top: 15px;
}
.data span {
  margin-left: 10px;
}
.main {
  margin-top: 15px;
  height: 250px;
  /* padding-left: 15px; */
}
.main-nav {
  background-color: #fafafa;
  height: 40px;
  border-bottom: 2px solid #e8e8e8;
  line-height: 40px;
  font-weight: 700;
  color: #9093a6;
  padding-left: 15px;
}
.main-body {
  padding-left: 15px;
  line-height: 50px;
  height: 50px;
}
.row {
  border-bottom: 2px solid #edf0f6;
}
.foot {
  width: 100%;
  height: 25px;
}
.foot .block {
  margin: 0 auto;
  float: right;
}
.bg-purple-light a {
  color: #40aaff;
}
</style>
